<template>
  <BasicTable @register="registerTable" />
</template>

<script lang="ts" setup>
  import { watch, ref } from "vue"
  import { BasicTable, useTable, BasicColumn } from "/@/components/Table"
  import { listPayNode } from "/@/api/pay"
  const props = defineProps({
    payOrderNo: { type: String, default: "" },
  })

  const columns: BasicColumn[] = [
    {
      dataIndex: "createdAt",
      width: 150,
      fixed: "left",
    },
    {
      width: 270,
      dataIndex: "title",
    },
  ]

  const [registerTable, { reload }] = useTable({
    api: listPayNode,
    pagination: false,
    beforeFetch: (params) => {
      params.payOrderNo = props.payOrderNo
    },
    showHeader: false,
    showIndexColumn: false,
    columns: columns,
    canResize: false,
  })

  //适用于 动态改变下拉选项的操作
  watch(
    () => props.payOrderNo,
    () => {
      if (props.payOrderNo) {
        reload()
      }
    }
  )
</script>

<style scoped></style>
